<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box{
      width: 980px;
      margin: 20px auto;
    }
    .user_input{
      overflow: hidden;
    }
    .user_input textarea:nth-child(1){
      border: 0 none;
      border: 1px solid #ccc;
      width: 100%;
      height: 150px;
      padding-top: 10px;
      padding-left: 10px;
      border-radius: 10px;
      outline-style: none;
      box-sizing: border-box;
      /* 禁止拖拽 */
      resize: none;
    }
    .user_input span,input[type="button"]{
      float: right;
    }
    .user_img, .msg{
      float:left;
    }
    .msg span{
      display: block;
    }
    .content li{
      overflow: hidden;
      border-bottom: 1px solid #ccc;

    }
  </style>
</head>
<body>
  <div class="box">
    <div class="user_input">
      <textarea placeholder="说点什么..." class="textarea" maxlength="200"></textarea>
      <input type="button" value="发布">
      <span class="number">/200</span>
      <span class="word_number">0</span>
    </div>
    <div class="content">
        <ul>

        </ul>
      </div>
  </div>
  <script>
    var input = document.querySelector('.textarea');
    var span = document.querySelector('.word_number');
    input.oninput = function(){
      if(this.value.length <= 200){
        span.innerText = this.value.length;
      }
    }
    //点击发布
    var btn = document.querySelector('input[type="button"]');
    var ul = document.querySelector('ul');
    btn.onclick = function(){
      //创建li
      var li = document.createElement('li');
      //创建用户头像标签
      var user_img = document.createElement('span');
      user_img.className = 'user_img';
      //创建用户头像
      var img =  document.createElement('img');
      img.src = '03.jpg';
      //创建用户信息
      var msg = document.createElement('div');
      msg.className = 'msg';
      //创建用户具体信息
      var title = document.createElement('span');
      title.className = 'user_title';
      title.innerText = '百里守约';
      //创建发布日期
      var time = document.createElement('span');
      time.innerText = '作者发布于： '+getTime();
      //创建内容信息
      var content_msg = document.createElement('span');
      content_msg.innerText = input.value;
      msg.appendChild(title);
      msg.appendChild(time);
      msg.appendChild(content_msg);
      user_img.appendChild(img);
      li.appendChild(user_img);
      li.appendChild(msg);
      //将li添加到ul上
      ul.insertBefore(li,ul.firstChild);
    }
    function getTime(){
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth()+1;
      var daay = date.getDate();
      var h = date.getHours();
      var m = date.getMinutes();
      var s = date.getSeconds();
      month= month >= 10 ? month : '0'+month;
      daay= daay >= 10 ? daay : '0'+daay;
      h= h >= 10 ? h : '0'+h;
      s= s >= 10 ? s : '0'+s;
      m= m >= 10 ? m : '0'+m;
      var time_str = year+'-'+month+'-'+daay+' '+h+':'+m+':'+s;
      return time_str
    }
  </script>
</body>
</html>